<template lant="html">
  <div>
    <h1> 动画</h1>
    <button class="btn btn-danger" @click="isShow=!isShow">显示隐藏</button>
    <transition name="right-in">
      <div class="box" v-show="isShow"></div>

    </transition>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        isShow: true
      }
    },
    components: {}
  }
</script>
<style lang="css">
  .box {
    width: 300px;
    height: 300px;
    background: red;
  }

  .right-in-enter-active, .right-in-leave-active {
    transition: 0.5s;
  }

  .right-in-enter {
    transform: translateX(300px);
    opacity: 0;
  }

  .right-in-leave-active {
    transform: translateY(300px);
    opacity: 0;
  }
</style>
